<template>
	<view class="container">
		<view class="header">
			<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			<text class="title">医护信息</text>
		</view>
		<view class="content">
			<view class="card">
				<view class="doctor-info">
					<image class="avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{doctorInfo.name}}</text>
						<text class="title">{{doctorInfo.title}}</text>
						<text class="department">{{doctorInfo.department}}</text>
					</view>
				</view>
				<view class="contact-info">
					<view class="contact-item" @click="makePhoneCall(doctorInfo.phone)">
						<text class="label">联系电话</text>
						<view class="value-wrapper">
							<text class="value">{{doctorInfo.phone}}</text>
							<u-icon name="phone" size="28" color="#3c9cff"></u-icon>
						</view>
					</view>
					<view class="contact-item">
						<text class="label">电子邮箱</text>
						<text class="value">{{doctorInfo.email}}</text>
					</view>
					<view class="contact-item">
						<text class="label">门诊时间</text>
						<text class="value">{{doctorInfo.clinicTime}}</text>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-title">专业介绍</view>
				<view class="introduction">
					<text>{{doctorInfo.introduction}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctorId: "1917552986976768002",
				doctorInfo: {
					avatar: '/static/doctor-avatar.png',
					name: '李医生',
					title: '主任医师',
					department: '神经内科',
					phone: '13800138000',
					email: 'doctor@example.com',
					clinicTime: '周一至周五 9:00-17:00',
					introduction: '从事神经内科临床工作20年，擅长脑卒中、帕金森病等神经系统疾病的诊断和治疗。'
				},
				defaultData: {
					avatar: '/static/doctor-avatar.png',
					name: '李医生',
					title: '主任医师',
					department: '神经内科',
					phone: '13800138000',
					email: 'doctor@example.com',
					clinicTime: '周一至周五 9:00-17:00',
					introduction: '从事神经内科临床工作20年，擅长脑卒中、帕金森病等神经系统疾病的诊断和治疗。'
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: (err) => {
						uni.$u.toast('拨打电话失败');
					}
				});
			},
			async loadData() {
				try {
					// 使用医生ID加载对应的医生信息
					const id = this.doctorId;
					console.log('加载医生信息，ID:', id);

					// 模拟API调用，实际项目中应该使用真实API
					// const res = await uni.$u.http.get(`/api/consultation/doctor/${id}`);
					const res = {
						code: 200,
						data: {
							id: id,
							avatar: '/static/doctor-avatar.png',
							name: '张医生',
							title: '主任医师',
							department: '神经内科',
							phone: '13800138000',
							email: 'doctor@example.com',
							clinicTime: '周一至周五 9:00-17:00',
							introduction: '从事神经内科临床工作20年，擅长脑卒中、帕金森病等神经系统疾病的诊断和治疗。'
						}
					};

					if (res.code === 200) {
						this.doctorInfo = {
							...this.defaultData,
							...res.data
						};
					} else {
						uni.showToast({
							title: res.msg || '获取数据失败',
							icon: 'none'
						});
						this.doctorInfo = this.defaultData;
					}
				} catch (e) {
					console.error('获取医护信息失败:', e);
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
					this.doctorInfo = this.defaultData;
				}
			}
		},
		onLoad(options) {
			// 获取路由参数中的医生ID
			if (options && options.id) {
				this.doctorId = options.id;
			}
			this.loadData();
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;

		.header {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-left: 20rpx;
			}
		}

		.content {
			.card {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

				.doctor-info {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 60rpx;
						margin-right: 30rpx;
					}

					.info {
						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}

						.title {
							font-size: 28rpx;
							color: #666;
							margin-bottom: 5rpx;
						}

						.department {
							font-size: 28rpx;
							color: #666;
						}
					}
				}

				.contact-info {
					.contact-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #eee;

						&:last-child {
							border-bottom: none;
						}

						.label {
							font-size: 28rpx;
							color: #666;
						}

						.value-wrapper {
							display: flex;
							align-items: center;

							.value {
								margin-right: 10rpx;
							}
						}
					}
				}

				.card-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 30rpx;
				}

				.introduction {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
				}
			}
		}
	}
</style>